<template>
  <div class="mac_bg"></div>
  <div class="login animate__animated" :class="{ animate__bounceOut: pass }">
    <div class="head">
      <img src="/favicon.png" alt="" />
    </div>
    <div class="message">ANWISE ERP CLOUD</div>
    <div class="form">
      <div class="item" :class="isUserNameError ? 'error' : ''">
        <input class="account" :placeholder="$t('login.username')" v-model="form.username" type="text"
          @keyup.enter="handleLogin" id="usernameInput"/>
      </div>
      <div class="item" :class="isUserPasswordError ? 'error' : ''">
        <input class="password" :placeholder="$t('login.password')" v-model="form.password" type="password"
          @keyup.enter="handleLogin" />
        <!-- <i class="iconfont icon-send" @click="handleLogin"></i> -->
      </div>

      <div class="item" :class="isCodeError ? 'error' : ''" v-if="this.website.captchaMode" prop="code">
        <el-row :span="24">
          <el-col :span="16">
            <input @keyup.enter="handleLogin" v-model="form.code" auto-complete="off" :placeholder="$t('login.code')"
              class="account" style="width: 120px;" />


          </el-col>
          <el-col :span="8">
            <div class="login-code">
              <img :src="form.image" class="login-code-img" @click="refreshCode"
                style="border-radius: 20px;height: 35px;margin-top: 4px;margin-right: 15px;" />
            </div>
          </el-col>
        </el-row>
        <!-- <i class="iconfont icon-send" @click="handleLogin"></i> -->
      </div>


      <el-button type="primary" style="width: 280px;height: 37px;border-radius: 20px;" @click="handleLogin">登录</el-button>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import { getCaptcha } from '@/api/user';
export default {
  data() {
    return {
      pass: false,
      isUserNameError: false,
      isUserPasswordError: false,
      isCodeError: false,
      form: {
        tenantId: '000000',
        username: '',
        password: '',
        //预加载白色背景
        image: '',
        //验证码的值
        code: '',
      },
    };
  },
  computed: {
    ...mapGetters(['tagWel']),
  },
  created(){
    this.refreshCode();
  },
  mounted(){
    document.getElementById('usernameInput').focus()
  },
  methods: {
    handleLogin() {
      if (this.form.username == '') {
        this.isUserNameError = true;
        setTimeout(() => {
          this.isUserNameError = false;
        }, 1000);
        return;
        return;
      } else if (this.form.password == '') {
        this.isUserPasswordError = true;
        setTimeout(() => {
          this.isUserPasswordError = false;
        }, 1000);
        return;
      }else if (this.form.code == '') {
        this.isCodeError = true;
        setTimeout(() => {
          this.isCodeError = false;
        }, 1000);
        return;
      }
      this.$store.dispatch('LoginByUsername', this.form).then(() => {
        this.pass = true;
        setTimeout(() => {
          this.$router.push(this.tagWel);
        }, 1000);
      }).catch(err=>{
        console.log('33333333333333',err);
        if(err) this.refreshCode();
      });
    },
    refreshCode() {
      if (this.website.captchaMode) {
        getCaptcha().then(res => {
          const data = res.data;
          this.form.key = data.key;
          this.form.image = data.image;
        });
      }
    },
  },
};
</script>
<style scoped>
@import url('./login.css');


</style>
